<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <link rel="stylesheet" href="../lib/animate.css">
    <script src="http://47.104.209.44/base/js/jquery-1.10.1.min.js"></script>
    <style>
        .box{
            width:170px;
            
            background: darkcyan;
            padding:30px;
        }
        table{
            border:1px solid #000;
        }
        td{ 
            border:1px solid #000;
            padding:10px;
            text-align: center;
        }
        ul{
            list-style: none;
            display: flex;
            margin:0;
            padding:0;
        }
        li{
            width:200px;
            background: pink;
        }

        .zoom-enter-active{
            animation: zoomInDown .9s;
        }

        .zoom-leave-active{
            animation: zoomOutDown .9s;
        }

        .box{
            width:50%;
            min-height:300px;
            border:1px solid #999;
            border-radius: 10px;

        }
        .router-link-exact-active, .router-link-active{
            font-size: 30px;
            font-weight: bold;
            color:#f50;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2>{{title}}</h2>
        <myhead></myhead>
        
        <!-- 5, 路由出口 路由匹配到的组件将渲染在这里  -->
        <router-view class="box"></router-view>

        <hr>
        <!-- 6 路由跳转 声明式 -->
        <div>
            <router-link :to="{name:'home',params:{token:'wh2114-dayadyup'}}">首页</router-link>
            <router-link :to="{name:'list'}">列表</router-link>
            <router-link :to="{name:'mine',query:{mid:2114,name:'zuozuomu'}}">我的</router-link>
            <router-link :to="{name:'notFound'}">404</router-link>
        </div>
    </div>

    <template id="home">
        <div>
            <h2>Home - Home - Home </h2>
            <h2>token  --- {{$route.params.token }}</h2>
            <button @click="gotomine">点击进入我的</button>
            <button @click="goback">返回上一级</button>

        </div>
    </template>

    <template id="list">
        <div>
            <h3>list - list - list  </h3>
            <div>
                <p v-for="(l,i) in list" :key="i" >
                    <router-link :to="{name:'detail',query:l}">
                        {{l.name}} - {{i}}
                    </router-link>
                </p>
            </div>
        </div>
    </template>

    <template id="mine">
        <div>
            <h2>Mine - Mine - 个人中心</h2>
            <h2>mid -- {{$route.query.mid }}</h2>
            <h2>name -- {{$route.query.name  }}</h2>

        </div>
    </template>
    <template id="notfound">
        <div>
            <h2>notfound - notfound - 404 </h2>
        </div>
    </template>
    <template id="detail">
        <div>
            <h2>歌单详情- detail - <button @click="$router.back()">返回</button></h2>
            <h2>name -- {{$route.query.name }}</h2>
            <h2>歌曲数量  -- {{$route.query.resourceCount }}</h2>

        </div>
    </template>
    <script>
        Vue.component('myhead',{
            template:"<h2>Head - wh2114-daydayup</h2>"
        })
        // 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)  (脚手架)

        // 1. 定义路由组件.
        const Home = {
            template:"#home",
            methods:{
                gotomine(){
                    // this.$router
                    // router 
                    // this.$router.push('/mine?mid=2113&name=leson')
                    // router.push({name:'mine'})
                    router.push({name:'mine',query:{mid:2110,name:'老王'}})
                },
                goback(){
                    // router.go(-1)
                    this.$router.back()
                }
            }
        }
        const Detail = {
            template:"#detail",

        }
        const List = {
            template:"#list",
            data(){
                return {
                    list:[]
                }
            },
            mounted(){
                $.ajax({
                    url:"http://47.104.209.44:3333/playlist/catlist",
                    type:"GET",
                    data:{},
                    success:res=>{
                        console.log(res)
                        this.list = res.sub;
                    }
                })
            }
        }
        const Mine = {
            template:"#mine"
        }
        const NotFound = {
            template:"#notfound"
        }
        // 2. 定义一些路由
        // 每个路由都需要映射到一个组件。
        const routes = [
            {
                path:"/",
                redirect:"/home"
            },
           {
               path:"/home/:token",
               name:"home",
               component:Home
           },
           {
               path:"/list",
               alist:"/goods",
               name:"list",
               component:List
           },
           {
                path:"/detail",
                name:'detail',
                component:Detail,
           },
           {
               path:"/mine",
               name:"mine",
               component:Mine 
           },
           {
               path:"/404",
               name:"notFound",
               component:NotFound
           },
           {
               path:"*",
               redirect:"/404"
           }
        ]

        // 3. 创建路由实例并传递 `routes` 配置  你可以在这里输入更多的配置
        // # 表示 hash 路由 
        const router = new VueRouter({
            routes,
            mode:"history",
            base:"",
            scrollBehavior (to, from, savedPosition) {
                // return 期望滚动到哪个的位置
                // return 0 
                return savedPosition;
            }
        })
        // scrollBehavior 滚动行为 
        // base 应用的基路径  一般不用设置   采用是相对路径   上线的时候才需要单独去设置路径
        // mode 路由模式   
        // hash  url地址的 hash 模式  兼容性强     带#号 可以刷新浏览器  但是地址比较长 不简洁
        // history  不带 # 号  不能刷新浏览器 (需要服务器重定向404 )   比较简洁优雅   依赖 HTML5 History API 和服务器配置
            
        // 4. 路由挂载到根实例
        const vm = new Vue({
            router, // this.$router
            data:{
                title:"Vue 路由初步 - 跳转",
            },
            components:{
               
            },
            watch:{
                '$route':function(to,from){
                    console.log(to)
                    console.log(from)
                }
            },
            mounted(){
                document.getElementsByTagName("title")[0].innerHTML = this.title 
                console.log(this.$router) // 路由对象  负责路由跳转 路由导航和路由全局监听
                console.log(this.$route)  // 路由信息对象  当前激活的路由对象  路由参数 query(?)&params(:)  

            }
        }).$mount("#app")


    </script>
    <!-- 
        嵌套路由
       有多少层嵌套就写多少个 children  每一层嵌套都必须对应有一个 router-view 
 
        路由跳转

        1. 声明式  html跳转  router-link   to   
        2. 编程式  javascript 跳转   函数代码跳转  this.$router  router 
        // 字符串
        router.push('home')
        // 对象
        router.push({ path: 'home' })
        // 命名的路由
        router.push({ name: 'user', params: { userId: '123' }})
        // 带查询参数，变成 /register?plan=private
        router.push({ path: 'register', query: { plan: 'private' }})

        router == this.$router  路由实例对象 进行路由跳转 还可以监听路由切换 
        $route == this.$route   路由对象属性  (params query name)

        router.go(1)
        router.goforward();    前进
        router.go(-1);       后退 
        router.back()  
     -->
</body>
</html>